import { getTenantOptions } from '@/pages/Tenant/Tenant/service';
import { ProCard } from '@ant-design/pro-components';
import {
  ProFormDatePicker,
  ProFormDateTimeRangePicker,
  ProFormDigit,
  ProFormDigitRange,
  ProFormList,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormTimePicker,
} from '@ant-design/pro-form';
import { ProForm } from '@ant-design/pro-form/lib/layouts';
import { FooterToolbar } from '@ant-design/pro-layout';
import { Button, Col, Collapse, Form, Input, InputNumber, message, Row } from 'antd';
import { useState } from 'react';
import { useModel } from 'umi';
import styles from '../index.less';
import { addChargeItem, addTemplateItem } from '../service';
import { addForm } from '../types';
// import { encodeTimeItem, getTimeMin } from './utils';

const { Panel } = Collapse;

interface addProps {
  close: () => void;
}

export default (prop: addProps) => {
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const tenantId = currUser?.tenantId;

  const [expiration, setExpiration] = useState<number>(0);
  const [fullMinus, setFullMinus] = useState<number>(0);
  const [maxDiscountValue, setMaxDiscountValue] = useState<number>(0);
  const { close } = prop;

  return (
    <>
      <ProForm<addForm>
        submitter={{
          // 完全自定义整个区域
          render: (props, doms) => {
            return [
              <FooterToolbar key="addFooterBar">
                <Button key="rest" onClick={() => props.form?.resetFields()}>
                  重置
                </Button>
                ,
                <Button type="primary" key="submit" onClick={() => props.form?.submit?.()}>
                  提交
                </Button>
              </FooterToolbar>,
            ];
          },
        }}
        onFinish={async (values: addForm) => {
          const value: any = {
            ...values,
            startDate: values.effectTime && values.effectTime[0],
            endDate: values.effectTime && values.effectTime[1],
            type: { ...values.type, type: Number(values.type.type) },
          };
          console.log('value', value);

          const res = await addTemplateItem(value);
          if (res) {
            if (res.code == 0) {
              message.success('添加成功');
              close();
              return true;
            }
            message.error('添加失败' + res?.message);
            return false;
          }

          return false;
        }}
        title="添加停车"
        // contextMenu="wwdawdawd"
      >
        <ProCard
          title={<div style={{ fontSize: 20, fontWeight: 700 }}>基本信息</div>}
          className={styles.card}
          style={{ borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }}
          bordered={false}
        >
          <Row gutter={36}>
            <Col lg={8} md={12} sm={24}>
              <ProFormText
                label={'优惠券名称'}
                fieldProps={{
                  showCount: true,
                  maxLength: 15,
                }}
                name="title"
                rules={[{ required: true, message: '请输入优惠券名称' }]}
                placeholder="自定义优惠券名称"
              />
            </Col>
            <Col lg={8} md={12} sm={24}>
              <ProFormText
                fieldProps={{
                  showCount: true,
                  maxLength: 15,
                }}
                label={'优惠券副标题'}
                name="subTitle"
                rules={[{ required: true, message: '请输入副标题名称' }]}
                placeholder="自定义副标题名称"
              />
            </Col>
            <Col lg={8} md={12} sm={24}>
              <ProFormDigit
                fieldProps={{
                  addonAfter: '份',
                  precision: 0,
                }}
                label={'发放数量'}
                max={100000}
                name="count"
                rules={[{ required: true, message: '请输入发放数量' }]}
                placeholder="自定义发放数量"
              />
            </Col>
          </Row>
          <Row gutter={36}>
            <Col lg={8} md={12} sm={24}>
              <ProFormSelect
                label={'优惠类型'}
                fieldProps={{
                  onChange: (e) => {
                    setFullMinus(e);
                  },
                }}
                valueEnum={{ 1: '固定满减', 2: '折扣满减' }}
                name={['type', 'type']}
                rules={[{ required: true, message: '请输入优惠券名称' }]}
                placeholder="选择优惠类型"
              />
            </Col>
            {Boolean(fullMinus) && (
              <Col lg={12} md={12} sm={24}>
                <ProForm.Item
                  label={'满减'}
                  name="type"
                  rules={[{ required: true, message: '请输入满减' }]}
                >
                  {fullMinus == 1 && (
                    <Input.Group compact>
                      <Form.Item noStyle name={['type', 'thresholdValue']} style={{ width: 600 }}>
                        <InputNumber
                          onChange={(e: number | null) => {
                            setMaxDiscountValue(e!);
                          }}
                          controls={false}
                          precision={2}
                          style={{ width: '38%', marginRight: '5%' }}
                          addonBefore={'满'}
                          size={'middle'}
                        />
                      </Form.Item>
                      <Form.Item noStyle name={['type', 'discountValue']}>
                        <InputNumber
                          controls={false}
                          style={{ width: '57%' }}
                          precision={2}
                          max={maxDiscountValue || 99999}
                          addonBefore={'减'}
                          addonAfter={'元'}
                          size={'middle'}
                          min={0}
                        />
                      </Form.Item>
                    </Input.Group>
                  )}
                  {fullMinus == 2 && (
                    <Input.Group compact>
                      <Form.Item noStyle name={['type', 'thresholdValue']} style={{ width: 600 }}>
                        <InputNumber
                          controls={false}
                          min={0}
                          precision={2}
                          style={{ width: '38%', marginRight: '5%' }}
                          addonBefore={'满'}
                          size={'middle'}
                        />
                      </Form.Item>
                      <Form.Item noStyle name={['type', 'discountValue']}>
                        <InputNumber
                          max={10}
                          controls={false}
                          style={{ width: '57%' }}
                          precision={1}
                          addonBefore={'打'}
                          addonAfter={'折'}
                          size={'middle'}
                          min={0}
                        />
                      </Form.Item>
                    </Input.Group>
                  )}
                </ProForm.Item>
              </Col>
            )}
          </Row>
          <Row gutter={36}>
            <Col md={{ span: 24 }} sm={24}>
              <ProFormTextArea
                label={'使用说明'}
                name="comment"
                rules={[{ required: true, message: '请输入使用说明' }]}
                placeholder="输入使用说明"
              />
            </Col>
          </Row>
        </ProCard>
        <ProCard
          style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }}
          title={<div style={{ fontSize: 20, fontWeight: 700 }}>基本规则</div>}
          bordered={false}
        >
          <Row gutter={36}>
            <Col lg={8} md={12} sm={24}>
              <ProFormSelect
                label={'用户类型'}
                fieldProps={{
                  mode: 'multiple',
                }}
                valueEnum={{ 0: '无限制', 1: '新用户', 2: '活跃用户', 3: '守约用户' }}
                name="zoneScopes"
                rules={[{ required: true, message: '请输入优惠券名称' }]}
                placeholder="选择优惠类型"
              />
            </Col>
            <Col lg={8} md={12} sm={24}>
              <ProFormDigit
                fieldProps={{
                  precision: 0,
                  addonAfter: '次',
                }}
                label={'每人限领数量'}
                name="userLimitCount"
                min={1}
                rules={[{ required: true, message: '请输入副标题名称' }]}
                placeholder="请输入每人限领次数"
              />
            </Col>
            <Col lg={8} md={12} sm={24}>
              <ProFormDigit
                fieldProps={{
                  precision: 0,
                  addonAfter: '次',
                }}
                label={'每日限领数量'}
                name="dayLimitCount"
                min={1}
                rules={[{ required: true, message: '请输入副标题名称' }]}
                placeholder="请输入每人限领次数"
              />
            </Col>
          </Row>
          <Row gutter={36}>
            <Col lg={8} md={12} sm={24}>
              <ProFormSelect
                label={'有效期'}
                name="Date"
                fieldProps={{
                  onChange: (e) => {
                    setExpiration(e);
                  },
                }}
                valueEnum={{ 1: '固定时间', 2: '领取后当天生效' }}
                rules={[{ required: true, message: '请选择有效期名称' }]}
                placeholder="选择有效期类型"
              />
            </Col>
            <Col lg={12} md={12} sm={24}>
              {expiration == 1 && (
                <ProFormDateTimeRangePicker
                  fieldProps={{
                    format: 'YY-MM-DD HH:mm:ss',
                  }}
                  placeholder={['请选择时间', '请选择时间']}
                  label={'固定日期'}
                  name="effectTime"
                  rules={[{ required: true, message: '请输入规则名称' }]}
                />
              )}
              {expiration == 2 && (
                <ProFormDigit
                  fieldProps={{
                    addonAfter: '天',
                  }}
                  label={'有效天数'}
                  name="validDays"
                  rules={[{ required: true, message: '请输入规则名称' }]}
                />
              )}
            </Col>
          </Row>
          <Row gutter={36}>
            <Col lg={16} md={16} sm={24}>
              <ProFormText
                label={'跳转链接'}
                name="name"
                rules={[{ required: true, message: '请输入跳转链接' }]}
                placeholder="填写跳转链接"
              />
            </Col>
          </Row>
        </ProCard>
      </ProForm>
    </>
  );
};
